<template>
  <el-card>
    <div class="title">
        <p>订单状态:</p>
        <el-select  style="width: 240px" v-model="status" @change="changeStatus" >
            <el-option label="全部" :value="3"></el-option>
            <el-option label="已预约,待支付" :value="0"></el-option>
            <el-option label="已支付" :value="1"></el-option>
            <el-option label="已取消" :value="2"></el-option>
    </el-select>
    </div>
  </el-card>
  <el-card class="card"> 
    <el-table border :data="orderList" >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column label="就诊账号姓名" align="center" width="180" >
            <template #default="{row}" >
                {{ row.userId?.username }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式" align="center" width="180" >
            <template #default="{row}" >
                {{ row.patientId?.emergencyContactPhone }}
            </template>
          </el-table-column>
          <el-table-column label="就诊时间" align="center" width="180" >
            <template #default="{row}" >
                {{ row.scheduleId?.date }}
                {{ row.scheduleId?.endTime }} 前
            </template>
          </el-table-column>
          <el-table-column label="医院" align="center" width="180" >
            <template #default="{row}" >
                武汉第一人民医院
            </template>
          </el-table-column>
          <el-table-column label="科室" align="center" width="150" >
            <template #default="{row}" >
                <!--  -->
                {{ row.doctorId?.TweDepart }}
            </template>
          </el-table-column>
          <el-table-column label="医生" align="center" width="120" >
            <template #default="{row}" >
                {{ row.doctorId?.job?.jName }}
            </template>
          </el-table-column>
          <el-table-column label="服务费" align="center">
            <template #default="{row}" >
                {{ row.scheduleId?.price }} 元
            </template>
          </el-table-column>
          <el-table-column label="就诊人" align="center" width="130" >
            <template #default="{row}" >
                {{ row.patientId?.name }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center" width="130" >
            <template #default="{row}" >
                {{ row.registerStatus==0?'已预约,待支付':row.registerStatus==1?'已支付':row.registerStatus==2?'已取消':'已过期' }}
            </template>
          </el-table-column>
       
        </el-table>
        <el-pagination
        class="pagination"
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[5,10, 20, 30, 40]"
          background
          layout="jumper,prev, pager, next,total, sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
</el-card>
</template>

<script setup>
import { ref , onMounted } from 'vue'
import { getAllOrdersAPI } from '@/api/order'
let orderList = ref([])
let orderListCopy = ref([])
let status = ref(3)
let pageNo = ref(1)
let pageSize = ref(10)
let total = ref(0)
onMounted(()=>{
    getOrderList()
})
const getOrderList = async ()=>{
    let result = await getAllOrdersAPI(pageNo.value,pageSize.value)
    orderList.value = result.data
    orderListCopy.value = result.data
    total.value = result.total
}
const handleSizeChange = (val) => {
  pageSize.value = val;
  getOrderList()
};
const handleCurrentChange = (val) => {
  pageNo.value = val;
  getOrderList()
};
const changeStatus = ()=>{
    if(status.value == 3) {
        getOrderList()
    }else {
        orderList.value = orderListCopy.value.filter(item=>item.registerStatus == status.value)
    }
}
</script>

<script>
export default {
    data() {
        return {
            orderList:[],
            orderListCopy:[],
            status:3,
            pageNo:1,
            pageSize:10,
            total:0
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 15px;
    p {
        margin-right: 10px;
    }
}
.card {
  margin-top: 20px;
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
